<template>
	<view class="container">
		<!-- 顶部用户信息区域 -->
		<view class="header-section">
			<view class="status-bar"></view>
			<view class="user-profile" @click="goToProfile">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="avatar-status"></view>
				</view>
				<view class="user-info">
					<view class="username">{{ userInfo.nickname }}</view>
					<view class="user-meta">
						<text class="user-id">ID: {{ userInfo.userNumber }}</text>
						<view class="verification-badge">
							<text class="badge-text">已认证</text>
						</view>
					</view>
				</view>
				<view class="profile-arrow">
					<text class="arrow-icon">→</text>
				</view>
			</view>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stat-card" @click="navigateTo('commission')">
					<view class="stat-icon balance-icon">
						<text class="icon-symbol">¥</text>
					</view>
					<view class="stat-content">
						<text class="stat-value">{{this.stats.balance}}</text>
						<text class="stat-label">佣金</text>
					</view>
				</view>
				<view class="stat-card" @click="navigateTo('points')">
					<view class="stat-icon points-icon">
						<text class="icon-symbol">★</text>
					</view>
					<view class="stat-content">
						<text class="stat-value">{{this.stats.points}}</text>
						<text class="stat-label">积分</text>
					</view>
				</view>
				<view class="stat-card" @click="navigateTo('coupons')">
					<view class="stat-icon coupon-icon">
						<text class="icon-symbol">券</text>
					</view>
					<view class="stat-content">
						<text class="stat-value">0</text>
						<text class="stat-label">优惠券</text>
					</view>
				</view>
				<view class="stat-card" @click="navigateTo('member')">
					<view class="stat-icon member-icon">
						<text class="icon-symbol">VIP</text>
					</view>
					<view class="stat-content">
						<text class="stat-value">普通</text>
						<text class="stat-label">会员等级</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单管理区域 -->
		<view class="order-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">订单管理</text>
					<view class="title-line"></view>
				</view>
				<view class="view-all-btn" @click="navigateTo('orders')">
					<text class="btn-text">查看全部</text>
					<text class="btn-arrow">→</text>
				</view>
			</view>

			<view class="order-actions">
				<view class="action-item" @click="navigateTo('pending-payment')">
					<view class="action-icon payment-icon">
						<text class="icon-text">付</text>
					</view>
					<text class="action-label">待付款</text>
				</view>
				<view class="action-item" @click="navigateTo('pending-delivery')">
					<view class="action-icon delivery-icon">
						<text class="icon-text">收</text>
					</view>
					<text class="action-label">待收货</text>
				</view>
				<view class="action-item" @click="navigateTo('pending-pickup')">
					<view class="action-icon pickup-icon">
						<text class="icon-text">提</text>
					</view>
					<text class="action-label">待自提</text>
				</view>
				<view class="action-item" @click="navigateTo('refund')">
					<view class="action-icon refund-icon">
						<text class="icon-text">售</text>
					</view>
					<text class="action-label">售后</text>
				</view>
			</view>
		</view>

		<!-- 服务功能区域 -->
		<view class="services-section">
			<view class="service-item" @click="navigateTo('favorites')">
				<view class="service-icon favorites-icon">
					<text class="service-symbol">♥</text>
				</view>
				<view class="service-info">
					<text class="service-title">我的收藏</text>
					<text class="service-desc">收藏的商品和店铺</text>
				</view>
				<view class="service-arrow">
					<text class="arrow-text">→</text>
				</view>
			</view>
			<view class="service-divider"></view>
			<view class="service-item" @click="navigateTo('address')">
				<view class="service-icon address-icon">
					<text class="service-symbol">📍</text>
				</view>
				<view class="service-info">
					<text class="service-title">收货地址</text>
					<text class="service-desc">管理配送地址信息</text>
				</view>
				<view class="service-arrow">
					<text class="arrow-text">→</text>
				</view>
			</view>
			<view class="service-divider"></view>
			<view class="service-item" @click="navigateTo('security')">
				<view class="service-icon security-icon">
					<text class="service-symbol">🛡</text>
				</view>
				<view class="service-info">
					<text class="service-title">账号安全</text>
					<text class="service-desc">密码和安全设置</text>
				</view>
				<view class="service-arrow">
					<text class="arrow-text">→</text>
				</view>
			</view>
		</view>

		<!-- 推广邀请区域 -->
		<view class="invitation-section" @click="navigateTo('invite')">
			<view class="invitation-content">
				<view class="invitation-info">
					<text class="invitation-title">邀请好友</text>
					<text class="invitation-subtitle">邀请好友注册，双方均可获得奖励</text>
				</view>
				<view class="invitation-action">
					<text class="action-btn">立即邀请</text>
				</view>
			</view>
			<view class="invitation-decoration">
				<view class="deco-circle circle-1"></view>
				<view class="deco-circle circle-2"></view>
				<view class="deco-circle circle-3"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		del
	} from '@/utils/request';
	import {
		auth
	} from '@/utils/auth.js'; // 导入认证工具

	export default {
		data() {
			return {
				userInfo: {
					nickname: '微信用户',
					avatar: '/static/logo.png',
					userNumber: '88889329854343363',
					userId: ''
				},
				stats: {
					balance: 0,
					points: 0,
					coupons: 0,  //写后端接口，根据用户ID查询其优惠券数量
					memberLevel: 0
				}
			}
		},
		methods: {
			goToProfile() {
				uni.navigateTo({
					url: '/pages/profile/profile'
				});
			},

			async loadUserInfo() {
				this.userInfo.userId = auth.getUserInfo().userId
				const res = await get("/order/frontUser/getUserById/" + this.userInfo.userId);
				console.log('API返回结果:', res);
				this.userInfo.nickname = res.data.userNmae;
				this.userInfo.userNumber = res.data.userAccount;
				this.stats.balance = res.data.userBalance;
				this.stats.points = res.data.userPoints;
				this.stats.memberLevel = res.data.vipStatus;
				this.userInfo.avatar = res.data.userAvatar;
				
			},
			// 页面加载时获取用户信息
			onLoad() {
				this.loadUserInfo();
			},

			navigateTo(page) {
				console.log('导航到:', page);
				console.log('用户数据:', {
					userId: this.userInfo.userId,
					balance: this.stats.balance,
					points: this.stats.points
				});

				// 订单相关页面跳转
				if (page === 'pending-payment') {
					uni.navigateTo({
						url: '/pages/orderList/orderList?status=pending&type=mall'
					});
				} else if (page === 'pending-delivery') {
					uni.navigateTo({
						url: '/pages/orderList/orderList?status=paid&type=mall'
					});
				} else if (page === 'pending-pickup') {
					uni.navigateTo({
						url: '/pages/orderList/orderList?status=pickup&type=mall'
					});
				} else if (page === 'refund') {
					uni.navigateTo({
						url: '/pages/orderList/orderList?status=refund&type=mall'
					});
				} else if (page === 'orders') {
					uni.navigateTo({
						url: '/pages/orderList/orderList?status=all&type=mall'
					});
				} else if (page === 'member') {
					uni.navigateTo({
						url: '/pages/memberCenter/memberCenter'
					});
				} else if (page === 'commission') {
					// 跳转佣金页面，通过URL参数携带balance数据
					uni.navigateTo({
						url: `/pages/myRewards/myRewards?balance=${this.stats.balance}`
					});
				} else if (page === 'points') {
					// 跳转积分页面，携带积分数据
					uni.navigateTo({
						url: `/pages/myPoints/myPoints?userId=${this.userInfo.userId}&points=${this.stats.points}`
					});
				} else if (page === 'coupons') {
					// 跳转优惠券页面，携带优惠券数据
					uni.navigateTo({
						url: `/pages/myCoupons/myCoupons?userId=${this.userInfo.userId}`
					});
				} else if (page === 'favorites') {
					uni.navigateTo({
						url: `/pages/myCollections/myCollections?userId=${this.userInfo.userId}`
					});
				} else if (page === 'security') {
					uni.navigateTo({
						url: `/pages/accountSecurity/accountSecurity?userId=${this.userInfo.userId}`
					});
				} else if (page === 'invite') {
					uni.navigateTo({
						url: '/pages/inviteFriends/inviteFriends'
					});
				} else if (page === 'address') {
					uni.navigateTo({
						url: '/pages/address/address'
					});
				} else {
					// 其他页面的跳转逻辑
					uni.showToast({
						title: `${page} 功能开发中`,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
		min-height: 100vh;
	}

	/* 顶部用户信息区域 */
	.header-section {
		background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
		padding: 0 30rpx 40rpx;
		position: relative;
	}

	.status-bar {
		height: calc(var(--status-bar-height, 0) + 20rpx);
		background: transparent;
	}

	.user-profile {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.user-profile:active {
		transform: translateY(2rpx);
		opacity: 0.9;
	}

	.avatar-container {
		position: relative;
		margin-right: 30rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.9);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}

	.avatar-status {
		position: absolute;
		bottom: 2rpx;
		right: 2rpx;
		width: 24rpx;
		height: 24rpx;
		background: #27ae60;
		border: 3rpx solid white;
		border-radius: 50%;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.user-info {
		flex: 1;
		color: white;
	}

	.username {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 12rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}

	.user-meta {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.user-id {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
	}

	.verification-badge {
		background: rgba(39, 174, 96, 0.9);
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		backdrop-filter: blur(10rpx);
	}

	.badge-text {
		font-size: 20rpx;
		color: white;
		font-weight: 500;
	}

	.profile-arrow {
		margin-left: 20rpx;
	}

	.arrow-icon {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.7);
		font-weight: 300;
		transition: all 0.3s ease;
	}

	.user-profile:active .arrow-icon {
		transform: translateX(5rpx);
	}

	/* 数据统计卡片 */
	.stats-section {
		margin: -20rpx 30rpx 30rpx;
		position: relative;
		z-index: 10;
	}

	.stats-grid {
		display: flex;
		gap: 15rpx;
	}

	.stat-card {
		flex: 1;
		background: white;
		border-radius: 16rpx;
		padding: 25rpx 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.stat-card:active {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
	}

	.stat-icon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 15rpx;
		position: relative;
	}

	.balance-icon {
		background: linear-gradient(135deg, #3498db, #2980b9);
		box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.3);
	}

	.points-icon {
		background: linear-gradient(135deg, #f39c12, #e67e22);
		box-shadow: 0 4rpx 12rpx rgba(243, 156, 18, 0.3);
	}

	.coupon-icon {
		background: linear-gradient(135deg, #e74c3c, #c0392b);
		box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);
	}

	.member-icon {
		background: linear-gradient(135deg, #9b59b6, #8e44ad);
		box-shadow: 0 4rpx 12rpx rgba(155, 89, 182, 0.3);
	}

	.icon-symbol {
		font-size: 24rpx;
		color: white;
		font-weight: 600;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.stat-content {
		text-align: center;
	}

	.stat-value {
		font-size: 32rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 8rpx;
		display: block;
	}

	.stat-label {
		font-size: 24rpx;
		color: #7f8c8d;
		font-weight: 500;
	}

	/* 订单管理区域 */
	.order-section {
		background: white;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		padding: 35rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: 700;
		color: #2c3e50;
	}

	.title-line {
		width: 40rpx;
		height: 3rpx;
		background: linear-gradient(90deg, #3498db, #2980b9);
		border-radius: 2rpx;
	}

	.view-all-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		cursor: pointer;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		transition: all 0.3s ease;
	}

	.view-all-btn:active {
		background: rgba(52, 152, 219, 0.1);
	}

	.btn-text {
		font-size: 26rpx;
		color: #3498db;
		font-weight: 500;
	}

	.btn-arrow {
		font-size: 24rpx;
		color: #3498db;
		transition: transform 0.3s ease;
	}

	.view-all-btn:active .btn-arrow {
		transform: translateX(3rpx);
	}

	.order-tabs {
		display: flex;
		gap: 40rpx;
		margin-bottom: 35rpx;
		border-bottom: 1rpx solid #ecf0f1;
		padding-bottom: 20rpx;
	}

	.tab-item {
		font-size: 28rpx;
		color: #7f8c8d;
		font-weight: 500;
		padding-bottom: 15rpx;
		position: relative;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #2c3e50;
		font-weight: 600;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -21rpx;
		left: 0;
		right: 0;
		height: 3rpx;
		background: linear-gradient(90deg, #3498db, #2980b9);
		border-radius: 2rpx;
	}

	.order-actions {
		display: flex;
		justify-content: space-between;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.action-item:active {
		transform: translateY(-3rpx);
	}

	.action-icon {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.payment-icon {
		background: linear-gradient(135deg, #ff6b6b, #ee5a52);
	}

	.delivery-icon {
		background: linear-gradient(135deg, #4ecdc4, #44a08d);
	}

	.pickup-icon {
		background: linear-gradient(135deg, #feca57, #ff9ff3);
	}

	.refund-icon {
		background: linear-gradient(135deg, #a55eea, #26de81);
	}

	.icon-text {
		font-size: 28rpx;
		color: white;
		font-weight: 700;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.action-label {
		font-size: 24rpx;
		color: #2c3e50;
		font-weight: 500;
	}

	/* 服务功能区域 */
	.services-section {
		background: white;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
		overflow: hidden;
	}

	.service-item {
		display: flex;
		align-items: center;
		padding: 35rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
	}

	.service-item:active {
		background: rgba(52, 152, 219, 0.05);
		transform: translateX(5rpx);
	}

	.service-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 25rpx;
		position: relative;
	}

	.favorites-icon {
		background: linear-gradient(135deg, #ff6b6b, #ee5a52);
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
	}

	.address-icon {
		background: linear-gradient(135deg, #4ecdc4, #44a08d);
		box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);
	}

	.security-icon {
		background: linear-gradient(135deg, #a55eea, #8854d0);
		box-shadow: 0 4rpx 12rpx rgba(165, 94, 234, 0.3);
	}

	.service-symbol {
		font-size: 28rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.service-info {
		flex: 1;
	}

	.service-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 8rpx;
	}

	.service-desc {
		font-size: 24rpx;
		color: #7f8c8d;
		line-height: 1.4;
	}

	.service-arrow {
		margin-left: 20rpx;
	}

	.arrow-text {
		font-size: 28rpx;
		color: #bdc3c7;
		font-weight: 300;
		transition: all 0.3s ease;
	}

	.service-item:active .arrow-text {
		color: #3498db;
		transform: translateX(3rpx);
	}

	.service-divider {
		height: 1rpx;
		background: linear-gradient(90deg, transparent, #ecf0f1, transparent);
		margin: 0 35rpx;
	}

	/* 推广邀请区域 */
	.invitation-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		margin: 0 30rpx 40rpx;
		border-radius: 20rpx;
		padding: 35rpx;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		position: relative;
		overflow: hidden;
		box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
	}

	.invitation-section:active {
		transform: translateY(-2rpx);
		box-shadow: 0 12rpx 35rpx rgba(102, 126, 234, 0.4);
	}

	.invitation-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	.invitation-info {
		flex: 1;
	}

	.invitation-title {
		font-size: 36rpx;
		font-weight: 700;
		color: white;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.invitation-subtitle {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.4;
	}

	.invitation-action {
		margin-left: 30rpx;
	}

	.action-btn {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);
		color: white;
		font-size: 28rpx;
		font-weight: 600;
		padding: 16rpx 32rpx;
		border-radius: 25rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.invitation-section:active .action-btn {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(1.05);
	}

	.invitation-decoration {
		position: absolute;
		top: 0;
		right: 0;
		width: 200rpx;
		height: 100%;
		pointer-events: none;
	}

	.deco-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-1 {
		width: 80rpx;
		height: 80rpx;
		top: 20rpx;
		right: 30rpx;
		animation: float 6s ease-in-out infinite;
	}

	.circle-2 {
		width: 50rpx;
		height: 50rpx;
		top: 60rpx;
		right: 80rpx;
		animation: float 8s ease-in-out infinite reverse;
	}

	.circle-3 {
		width: 30rpx;
		height: 30rpx;
		bottom: 30rpx;
		right: 50rpx;
		animation: float 10s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-15px);
		}
	}
</style>